<div class="pop_up">
    <div class="pop_up_main">
		<div class="pop_up_tab">
            <div class="tab attrSetTab">
                <a href="javascript:void(0)" rel="diy_baseSet" class="on">基本设置</a>
                <a href="javascript:void(0)" rel="diy_customContent">模板设置</a>
            </div>
        </div>
        <div class="pop_up_box">
            <ul class="pop_up_box_form" id="diy_baseSet">
                <li>
                    <div class="c1">
                        数据源：
                    </div>
                    <div class="c2">
                        <label>
                            <input name="source" rel="not_input" type="radio" value="ALL" checked="checked" class="param_post radio_select in_mr5" />不限制
                        </label>
                        <label>
                            <input name="source" rel="group_input" class="param_post radio_select in_mr5" type="radio" value="group"/>按用户组
                        </label>&nbsp;
                        <label>
                            <input name="source" rel="user_input" type="radio" value="user" class="param_post radio_select in_mr5" />用户ID
                        </label>
                        <div id="group_input" class="param_select" style="display:none;">
                            <select name="select" size="10" multiple="multiple" id="group" style="width:90%;" class="text param_post">
								<php>$tempCate = explode(',',$attr['group']);</php>
                                <option value="ALL">全部</option>
                                <volist name="cate" id="vo">
                                    <option value="{$vo.gid}" <php>if(in_array($vo['gid'],$tempCate)){ echo 'selected' ;} </php>>{$vo.gname}</option>
                                </volist>
                            </select>
                        </div>
                        <div id="user_input" style="display:none;" class="param_select">
                            <textarea cols="" rows="5" id="user" class="text param_post" style="width:90%;"/>
                            <br/>
                            输入团队ID,多条数据用“，”分隔） 
                        </div>
                    </div>
                </li>
                <li>
                    <div class="c1">
                        附加：
                    </div>
                    <div class="c2">
                        <div>
                            <label class="mr10">
                                <input name="status" type="radio" value="1" class="param_post in_mr5" />被关注数
                            </label>
                            <label class="mr10">
                                <input name="status" type="radio" value="2" class="param_post in_mr5" />经验信息
                            </label>
                            <label class="mr10">
                                <input name="status" type="radio" value="3" class="param_post in_mr5" />最新动态
                            </label>
                            <label class="mr10">
                                <input name="status" type="radio" value="4" class="param_post in_mr5" />最新记录
                            </label><br />
                            <label class="mr10">
                                <input name="status" type="radio" value="5" class="param_post in_mr5" />最新问题
                            </label>
                            <label class="mr10">
                                <input name="status" type="radio" value="6" class="param_post in_mr5" />最新帖子
                            </label>
							<label class="mr10">
                                <input name="status" type="radio" value="7" class="param_post in_mr5" />最新博文
                            </label>
							<label class="mr10">
                                <input name="status" type="radio" value="8" class="param_post in_mr5" />最新词条
                            </label>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="c1">
                        排序：
                    </div>
                    <div class="c2">
                        <select name="u" id="order" class="param_post text">
                            <option value="uid" selected="selected">按用户Id</option>
                            <option value="followed">被关注数</option>
							<option value="exp">按贡献数</option>
							<option value="score">按金币数</option>
							<option value="hot">博客排名</option>
                        </select>
                        <select name="u" id="order_t" class="param_post text">
                            <option value="DESC" selected="selected">倒序（新到旧，大到小）</option>
                            <option value="ASC">正序（旧到新，小到大）</option>
                        </select>
                    </div>
                </li>
                <li>
                    <div class="c1">
                        结果数：
                    </div>
                    <div class="c2">
                        <input id="limit" value="10" class="param_post text"/>
                    </div>
                </li>
                <li>
                    <div class="c1">
                        标题：
                    </div>
                    <div class="c2">
                        <input id="title" value="" class="param_post text"/>
                    </div>
                </li>
								 <li>
                    <div class="c1">
                        标题截取：
                    </div>
                    <div class="c2">
                        <input id="words" value="10" class="param_post text"/>
                    </div>
                </li>
                <li>
                    <div class="c1">
                        模板：
                    </div>
                    <div class="c2">
                        <select name="u" id="style" class="param_post text">
                        	<option value="simple_countdown" selected="selected">一列数字列表</option>
                            <option value="user_list">用户头像列表</option>
							  <option value="mid_top2">竖形列表</option>
							  <option value="mid_top">Top3排行</option>
							  <option value="user_slide_list">用户横滚动（100%比例）</option>
                       		<php>if(isset($html)){</php>
								<option value="{$attr['style']}" selected="selected">自定义模板</option>
							<php>}</php>
                        </select>
                        <a class="ml5" href="javascript:void(0)" onclick="editTpl($('#style').val())">编辑模板</a>
                    </div>
                </li>
			    <li>
                    <div class="c1">
                        模板高度：
                    </div>
                    <div class="c2">
                        <input id="tplHeight" value="" class="param_post text"/>(请输入完整高度。px为单位。可以为百分比)
                    </div>
                </li>
                <!--<li>
                    <div class="c1">
                        缓存时间：
                    </div>
                    <div class="c2">
                        <select name="u" id="cacheTime" class="param_post text">
                            <option value="0">不缓存</option>
                            <php>
                                for($i=1;$i<=10;$i++){
                            </php>
                            <option value="{$i}">{$i}分钟</option>
                            <php>
                                }
                            </php>
                        </select>
                    </div>
                </li>-->
            </ul>
			  <ul class="pop_up_box_form" id="diy_customContent" style="display:none;">
                <li>
                    <div class="c1">
                        修改模板：
                    </div>
                    <div class="c2">
                        <textarea cols="" rows="5" id="customContent" class="text" style="width:90%;overflow: auto;height:400px;">{$html}</textarea>
                        <br/>
                    </div>
                </li>
                <li>
                	<div class="c1">
                        &nbsp;
                    </div>
                    <div class="c2">
                      <input class="btn_sea" type="submit" id="diy_saveTpl" value="保存模板">
                        <br/>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div id="preview" class="preview_r">
    </div>
</div>
<script>
                                                    	var index= '{$index}';
                                                    	var layout = '{$layout}';
                                                    	var parentId = '{$parentId}';
                                                    	var id = '{$id}';
                                                    	var namespace = '{$_GET['tagName']}';
                                                        var postData = new Array();
                                                        var defaultAttr = new Array();
                                                        var TplContent = "";
                                                        var customTpl = '';
                                                        var time = 'custom{:time()}';
                                                        var sign = "{$_GET['sign']}"
                                                        var customTplCount = 1;
                                                        var tplData = new Array();
                                                        var hasDefault = false;
						
						<php>if(!empty($attr)){</php>
							hasDefault = true;
						<php>}</php>
				
                            <volist name="attr" id="vo">
            						defaultAttr["{$key}"] = "{$vo}";
            				</volist>
				    $(function(){
					customTpl = $('#customContent').val();
                    if (hasDefault) {
                        $('.param_post').each(function(){
                            if ($(this).attr('type') == "radio") {
                                var name = $(this).attr('name');
                                if ($(this).val() == defaultAttr[name]) {
                                   		$(this).attr('checked','checked');
										if(name == "source"){
											var tempId = $(this).attr('rel');
											$('#' + tempId).show();
	                                        $('#' + tempId + " textarea").focus();
											$('#' + tempId + " select").focus();
	                                        $('.param_select').not($('#' + tempId)).hide();
										}
                                }
                            }else if($(this).attr('type') == "checkbox"){
								 var name = $(this).attr('name');
								 if( typeof(defaultAttr[name])  != 'undefined' ){
								 	 	var tempArray = defaultAttr[name].split(',');
										 if ($.inArray($(this).val(),tempArray) != -1) {
		                                   		$(this).attr('checked','checked');
								 		 }
								  }
	
							}
                          	else{
            								if( !$(this).attr('multiple') || $(this).attr('multiple') == 'undefined'){
            									$(this).val(defaultAttr[$(this).attr('id')]);
            								}
							}
                        });
                   }
                });
						 function preview(){
                                var sendData = getPostData();
                                $.ajax({
                                    type: "POST",
                                    url: APP + '&mod=Diy&act=previewModel',
                                    data: sendData,
                                    dataType: 'json',
                                    success: function(result){
                                        $('#preview').html(result.html);
                                        var content = '<div id="diy_copyHtmlContent">\
                                            		复制源代码:<input type="text" id="copyHtmlContent" onclick="select();" style="width:150px;" />\
                                        		</div>'
										var widget = '<div id="diy_copyHtmlContent">\
                                            		复制标签:<input type="text" id="copyWidgetContent" onclick="select();" style="width:150px;" />\
                                        		</div>'		
                                        $('#preview').append(content);
										$('#preview').append(widget);
                                        $('#diy_copyHtmlContent');
                                        $('#copyHtmlContent').val(result.html).bind('click',function(){
											copyToClipboard(result.html);
										});
										$('#copyWidgetContent').val(result.widget).bind('click',function(){
											copyToClipboard(result.widget);
										});
										//$('#copyHtml').click();
                                    }
                                });
                            }
                                                    	
                                                    	function savemodel(){
                											var sendData = getPostData();
                                                			$.ajax({
                                                				type : "POST",
                                                				url  : APP + '&mod=Diy&act=saveModel',
                                                				data : sendData,
                                                				dataType : 'json',
                                                				success : function(result){
                                                 					//var jsonData = eval('('+result+')');
                                                    		 		frameArray[parentId][layout][index] = result['sign'];
                                                    		 		 if($('#'+id).html() == null){
                                                			  		 $('#placeholder').html(result['html']);
                                                    		 		 $('#placeholder')
                                                    		 			.removeAttr('class')
                                                    					.removeAttr('style')
                                                    					.addClass('mb10')
                                                    					.attr('id',id)
                                                    					.attr('rel',namespace)
																		.attr('sign',result['sign'])
                                                    		 			.prepend('<div class="diy_edit"><div class="ico_edit"><a href="javascript:void(0)" onclick="updateDiyModel(\''+id+'\',\''+namespace+'\')" class="ico_diyedit" title="设置">设置</a> <a href="javascript:void(0)" class="ico_diydel" onclick="deleteDiy(\'' + id + '\')" title="删除">删除</a></div></div>');
                                            		        		 }else{
                                            		    			 	$('#'+id).html(result['html']).attr('sign',result['sign'])
;
                                            		    				$('#'+id).prepend('<div class="diy_edit"><div class="ico_edit"><a href="javascript:void(0)" onclick="updateDiyModel(\''+id+'\',\''+namespace+'\')" class="ico_diyedit" title="设置">设置</a> <a href="javascript:void(0)" class="ico_diydel" onclick="deleteDiy(\'' + id + '\')" title="删除">删除</a></div></div>');
                                            		    
                                            		    			 }
                                                				}
                                                			});
                                                    		
                                                    	}
                            							$('.radio_select').click(function(){
                            								if($(this).attr('checked')){
                            									$('#'+$(this).attr('rel')).show();
                												$('#'+$(this).attr('rel')+" textarea").focus();
                            								}
                            								$('.param_select').not($('#'+$(this).attr('rel'))).hide();
                            								//alert($('.param_select').not($('#'+$(this).attr('rel'))).html());
                            							})
                        								
                    	    							function changStyle(_this){
                    										if(_this.val() == 'list'){
                    											$('#uploadAttach').show();
                    										}else{
                    											$('#uploadAttach').hide();
                												$("#attach_upload_data input[name='attach[]']").each(function(){
                    												$(this).remove();
                    											});
                    										}
                        								}
                    									
                                                        function getPostData(){
                                                            var data = new Array();
                                                            var result;
                                                            var checkedName = new Array();
                                                            $('.param_post').each(function(){
                                                                switch ($(this).attr('type')) {
                                                                    case "checkbox":
                                                                        if ($(this).attr('checked')) {
                                                                            var postKey = 'PARAM_' + $(this).attr('name');
                                                                            checkedName.push($(this).val());
                                                                            break;
                                                                        }
                                                                        else {
                                                                            return true;
                                                                        }
                                                                    case "radio":
                                                                            if ($(this).attr('checked')) {
                                                                                var postKey = 'PARAM_' + $(this).attr('name');
                                                                            }
                                                                            else {
                                                                                return true;
                                                                            }
                                                                        data[postKey] = $(this).val();
                                                                        break;
                                                                    default:
                                                                        var postKey = 'PARAM_' + $(this).attr('id');
																		 data[postKey] = $(this).val();
                                                                }
                                                            });
                                                            
                                                            var result = 'tagName=' + namespace;
                                                            if ($('#style').val().indexOf('custom') != -1) {
                                                                var value = customTpl.replace(/&/g, "[@]");
                                                                data['customContent'] = value;
                                                            }
                                                            for (var one in data) {
                                                                result += '&' + one + '=' + data[one];
                                                            }
                                                            return result;
                                                        }
                        							        				
    					$('.attrSetTab a').click(function(){
    						var rel = $(this).attr('rel');
							if(rel == "diy_customContent"){
								getTpl($('#style').val());
							}else{
								if($('#customContent').val() != TplContent){
									time = time + new String( customTplCount++ );
									customTpl = $('#customContent').val();
									var last = $('#style option:last').val();
									if( last.indexOf('custom') == -1 ){
										$('#style').append('<option value="'+time+'" selected>自定义模板</option>');
									}else{
										$('#style option:last').val(time).attr('selected','selected');
									}
								}
							}
							
							$(this).addClass('on');
							$('#tb_content_list').children('p').show();
    						$('.attrSetTab').children().not($(this)).removeClass('on');
    						$('.pop_up_box').children().not($('#' + rel)).hide();
    						$('#'+rel).show();
    					})
    					
        				function editTpl(tpl){
    						getTpl(tpl);
							$('.attrSetTab a').each(function(){
								if($(this).attr('rel') == 'diy_baseSet'){
									$(this).removeClass('on');
								}else{
									$(this).addClass('on');
								}
							})
							$('.attrSetTab a[rel=diy_customContent]').addClass('on');
							$('.attrSetTab a[rel=diy_baseSet]').removeClass('on');
							
							//保存模板
							$('#diy_saveTpl').click(function(){
								$('.attrSetTab a[rel=diy_baseSet]').click();	
							})
							$('#tb_content_list').children('p').hide();
    						$('#diy_baseSet').hide();
    						$('#diy_customContent').show();
        				}
    					function getTpl(tpl){

							
							if (tpl != time) {
								if(typeof(tplData[tpl]) != 'undefined'){
									$('#customContent').val(tplData[tpl]);
									TplContent = tplData[tpl];
									return ;
								}
								
								$.post(APP + '&mod=Diy&act=getTpl', {
									tpl: tpl,
									tagName: namespace,
									sign:sign
								}, function(result){
									$('#customContent').val(result);
									tplData[tpl] = result;
									TplContent = result;
									$('#style').val(tpl);
								});
							}else{
								$('#customContent').val(customTpl);
							}
    					}	
</script>
